<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>注册</title>
		<link rel="stylesheet" href="css/reset.css">
		<style media="screen">
			body{ width: 100%; height: 100%; background: url(images/reg_bg.png) no-repeat; background-size: 100% 100%;}
			input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset !important;}
			.box {width: 100%; padding:.2rem 15px 15px 15px; }
			.box .ins {margin-top: .1rem;}
			.box .phone {position: relative;}
			.box .phone a {display: block; width: .9rem; height: .26rem; line-height: .26rem;font-size: .12rem;  text-align: center;border-radius: 3px; position: absolute; top: .05rem; right: 0;}
			.looginsend1 {color:#ffe50e}
			.looginsend0 {color:#fff}
			/*.box form {display: table-cell;text-align: center;vertical-align: middle;}*/
			.box .reg-protocol {vertical-align: middle;}
			.box input {color:#fff; font-size: .12rem;}
			.box input[type='text'],.box input[type='password']{width: 100%; color:#fff line-height: .35rem; line-height: .35rem; border-bottom: 1px solid #fff; background-color: transparent;padding: 0 5px;}
			.checks > div{ vertical-align: middle;display: inline-block; width: 12px; height: 12px; border: 1px solid #fff;border-radius: 50%; position: relative;}
			.box .act::after {content: '';position: absolute;display: block; top: 1px; left:1px; width: 8px; height: 8px; background-color: #fff; border-radius: 50px;}
			input::-webkit-input-placeholder {color:#fff; font-size: .12rem;}
		　　 input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#fff;font-size: .12rem;}
		　　 input::-moz-placeholder { /* Mozilla Firefox 19+ */color:#fff;font-size: .12rem;}
		　　 input:-ms-input-placeholder { /* Internet Explorer 10+ */color:#fff;font-size: .12rem;}
			.reg-btn {height: .4rem; line-height: .4rem; text-align: center; color:#e41613; background-color: #fff; width: 100%; border-radius: .4rem; font-size: .12rem;}
			.logo {width: .92rem; height: 1.38rem; margin: .2rem auto;}
			.logo img {display: block; width: 100%; height: 100}
			.slik {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
			.flex-item {background: none; border-bottom: 1px solid #fff; height: .3rem; line-height: .3rem; color: #fff;font-size: .12rem;width: 30%;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="logo">
				<img src="images/logo2.png" alt="">
			</div>
			<form class="" action="" method="post">
				<div class="ins phone">
					<input type="text" name="mobile" id="mobile" value="" placeholder="输入11位手机号">
					<a href="javascript:;" class="looginsend1" onclick="verify()">获取验证码</a>
				</div>
				<div class="ins">
					<input type="text" name="vcode" value="" id="vcode" placeholder="输入验证码">
				</div>
				<div class="ins">
					<input type="password" name="password" value="" id="password" placeholder="请设置6-16位数字或字母密码">
				</div>
				<div class="ins">
					<input type="text" name="referrer_mobile" value="" readonly="readonly" id="referrer_name" placeholder="推荐人">
					<input type="hidden" id="referrer_id" name="" value="">
				</div>
				<div class="ins slik">
					<select class="flex-item" id="reg_province" name="">
						<option value="0">请选择省份</option>
					</select>
					<select class="flex-item" id="reg_city" name="">
						<option value="0">请选择城市</option>
					</select>
					<select class="flex-item" id="reg_county" name="">
						<option value="0">请选择区县</option>
					</select>
				</div>
				<div class="ins" style="padding:10px 0;">
					<label class="checks">
						<div class="act"></div>
						<input class="todo" type="hidden" name="" value="1">
						<span style="color: #fff; font-size:.11rem;"><span class="agreed">同意</span><a style="color: #fff; font-size:.11rem;"  target="_blank" href="protocol.html">《用户注册协议》</a></span>
					</label>
				</div>
				<div class="ins">
					<button type="button" class="reg-btn">注册</button>
				</div>
			</form>
		</div>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script src="../js/md5.min.js"></script>
	<script type="text/javascript" src="../plugin/layer/layer.js"></script>
	<script src="../js/service.js"></script>
	<script type="text/javascript">
	//接口地址
	var serverURLt =  cncbk_common_tools.serverURL + '/wy3app/app';
	//size
	(function (doc, win) {
		var docEl = doc.documentElement,
			docBody = doc.body,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				clientWidth = Math.min(Math.max(clientWidth, 320), 640);
				docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
			};
		if (!doc.addEventListener) return;
		docEl && recalc();
		doc.addEventListener('DOMContentLoaded', recalc, false);
		win.addEventListener(resizeEvt, recalc, false);
	})(document, window);
	$(document).ready(function() {
		//获取省份
		$.ajax({
            type:"post",
            dataType:'json',
            url:serverURLt +'/getWmArea',
			data:{
				'areaParentId':''
			},
            success:function(data){
				var html = ''
				var datas = data.data
				console.log(datas)
                // layer.msg(data.msg)
                if(data.code ==200) {
					for (var i = 0; i < datas.length; i++) {
						html += '<option value="'+ datas[i].areaId +'">' + datas[i].areaName + '</option>'
					}
                    $('#reg_province').append(html)
                }
            }
        })
	});
	$('#reg_province').change(function(){
		var ctId = $(this).val()
		if ($('#reg_province').val()== '0') {
			$('#reg_city').html('<option value="0">请选择城市</option>')
			$('#reg_county').html('<option value="0">请选择区县</option>')
		}else {
			$.ajax({
	            type:"post",
	            dataType:'json',
	            url:serverURLt +'/getWmArea',
	            data:{
					'areaParentId':ctId
				},
	            success:function(data){
					var html = ''
					var datas = data.data
					console.log(datas)
	                // layer.msg(data.msg)
	                if(data.code ==200) {
						for (var i = 0; i < datas.length; i++) {
							html += '<option value="'+ datas[i].areaId +'">' + datas[i].areaName + '</option>'
						}
	                    $('#reg_city').html(html)
						$('#reg_city').prepend('<option value="0">请选择城市</option>')
						$('#reg_city').val('0')
	                }
	            }
	        })
			$('#reg_county').html('<option value="0">请选择区县</option>')
		}
	})
	$('#reg_city').change(function(){
		var ctId = $(this).val()
		if ($('#reg_city').val()== '0') {
			$('#reg_county').html('<option value="0">请选择区县</option>')
		}else {
			$.ajax({
	            type:"post",
	            dataType:'json',
	            url:serverURLt +'/getWmArea',
	            data:{
					'areaParentId':ctId
				},
	            success:function(data){
					var html = ''
					var datas = data.data
					console.log(datas)
	                // layer.msg(data.msg)
	                if(data.code ==200) {
						for (var i = 0; i < datas.length; i++) {
							html += '<option value="'+ datas[i].areaId +'">' + datas[i].areaName + '</option>'
						}
						$('#reg_county').html(html)
						$('#reg_county').prepend('<option value="0">请选择区县</option>')
						$('#reg_county').val('0')
	                }
	            }
	        })
		}
	})

	//是否同意注册协议
	$('.agreed').click(function(){
		$('.todo').val() == '0' ? $('.todo').val('1') : $('.todo').val('0')
		$('.checks > div').toggleClass('act')
	})

	//获取url参数
	function getQueryString(key){
	    var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
	    var result = window.location.search.substr(1).match(reg);
	    return result?decodeURIComponent(result[2]):null;
  	}

	$('#referrer_id').val(getQueryString('id'))
	$('#referrer_name').val('推荐人：'+getQueryString('name'))

	//发送短信
	var psstest = /^(?=.*[a-zA-Z0-9].*)(?=.*[a-zA-Z\\W].*)(?=.*[0-9\\W].*).{6,20}$/;
    var phonetest = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    function verify (){
       var val = $('#mobile').val(); //获取输入手机号码
       // $('.div-phone').find('span').length == 0 &&
       if($('.phone a').attr('class') == 'looginsend1'){
         if(!phonetest.test(val)){
           layer.msg('手机号格式有误', function(){
           //关闭后的操作
           $("#mobile").focus()
           });
           return false;
         }
       }
       if(phonetest.test(val)){
         var time = 60;
         function timeCountDown(){
           if(time==0){
             clearInterval(timer);
             $('.phone a').attr("onclick","verify();")
             $('.phone a').addClass('looginsend1').removeClass('looginsend0').html("发送验证码");
             $('#mobile').removeAttr("readonly");//重新可编辑
             return true;
           }
           $('.phone a').html(time+"S后再次发送");
           time--;
           return false;
           //login.verify.checked = 0;
         }
         $('.phone a').removeAttr("onclick")
         $('.phone a').addClass('looginsend0').removeClass('looginsend1');
         timeCountDown();
         var timer = setInterval(timeCountDown,1000);
       }

       // $('#mobile').attr("readonly","readonly");//用disabled，form表单提交不了这个字段
       $.post(serverURLt + '/user/sendSmsCode', {type:'1',mobile:$('#mobile').val()},function(data){
         layer.msg(data.msg)
         console.log(data)
         if(data.code == 400){
           alert(data.msg);
           return false;
         }
       });
     }

	//提交注册
    $(".reg-btn").click(function () {
        // var name = $("#userName").val();
        var phone = $("#mobile").val();
        var code = $("#vcode").val();
        var pass = $("#password").val();
        if(!phonetest.test(phone)){
            layer.msg('手机号格式有误', function(){
            //关闭后的操作
            $("#mobile").focus()
            });
            return false;
        }
        if(code.length != 6){
            layer.msg('短信验证码错误', function(){
                //关闭后的操作
                $("#vcode").focus()
            });
            return false;
        }
        if(!psstest.test(pass)){
            layer.msg('密码为字母，数字，符号组合(6-20位 ', function(){
            //关闭后的操作
            $("#password").focus()
            });
            return false;
        }
		if($('#reg_province').val()== '0'){
            layer.msg('请选择省份', function(){
            //关闭后的操作
            });
            return false;
        }
		if($('#reg_city').val()== '0'){
            layer.msg('请选择城市', function(){
            //关闭后的操作
            });
            return false;
        }
		if($('#reg_county').val()== '0'){
            layer.msg('请选择区县', function(){
            //关闭后的操作
            });
            return false;
        }

		if($('.todo').val()!= 1){
            layer.msg('同意用户注册协议才可注册', function(){
            //关闭后的操作
            });
            return false;
        }

        $.ajax({
            type:"post",
            dataType:'json',
            url:serverURLt +'/user/member/register',
            data:{
          		"memberMobile":$("#mobile").val(),
              	"code":$("#vcode").val(),
              	"memberPasswd":md5($("#password").val()),
			  	"inviterId":$("#referrer_id").val(),
			  	"memberProvinceid":$("#reg_province").val(),
			  	"memberCityid":$("#reg_city").val(),
			  	"memberAreaid":$("#reg_county").val(),
            },
            success:function(data){
                layer.msg(data.msg)
                if(data.code ==200) {
					layer.msg(data.msg)
                    //跳转
                    window.location.href = 'about.html?app=0';
                }
            }
        })
    })

	</script>
</html>
